<template>
  <div class="putin" :style="{height:page_height+'px'}">

    <!--S顶部，活动名称-->
    <div id="header" ref="header">
      {{activity.name}}
    </div>
    <!--E顶部，活动名称-->

    <!--S主体-->
    <cube-scroll class="scroll" ref="scroll" :style="{height:scroll_height+'px'}">

      <!--S投放的卡券信息-->
      <div id="coupon" :class="coupon.type">
        <p class="type">{{getType(coupon.type)}}</p>
        <img v-if="coupon.images != undefined && coupon.images != null && coupon.images.length > 0" class="cover" :src="coupon.images[0].url" />
        <p class="cost">{{getCost(coupon.type)}}</p>
        <p class="name">{{coupon.name}}</p>
      </div>
      <!--E投放的卡券信息-->

      <!--S表单-->
        <cube-form ref="form" id="form" :model="data" :schema="form" @submit="submit">
        </cube-form>
      <!--E表单-->

    </cube-scroll>
    <!--E主体-->

    <!--S底部，按钮-->
    <div id="footer" ref="footer">
      <cube-button :primary="true" @click="$refs.form.submit()">确认投放</cube-button>
    </div>
    <!--E底部，按钮-->

  </div>
</template>

<script>
import store from '../../store.js';
import common from '../../public/common.js';
export default {
  name: 'putin',   //卡券编辑新增
  data(){
    var self = this;
    return {
      page_height:store.state.height,
      scroll_height:store.state.height,
      store_id:0,  //门店id
      coupon_id:0,  //卡券id
      activity_id:0,  //活动id
      activity:{},  //活动信息
      coupon:{},   //卡券信息
      //S表单
      data:{
        number:null,
        user_number:null,
        goal:1,
        use_limit_type:1,
        use_limit_time:common.timeFormat(new Date()),
      },
      limit_time_date:new Date(),
      form:{
        fields:[
            {
                label: '投放数量',
                type: 'input',
                modelKey: 'number',
                props: {
                  placeholder: '投放数量'
                },
                rules:{
                    required:true,
                    max:10000000,
                    min:1,
                    type:'number',
                    pattern:/^[0-9]+$/
                },
                events:{
                  blur(){
                    window.scroll(0,0);
                  }
                }
            },
            {
                label: '用户最多获取数量',
                type: 'input',
                modelKey: 'user_number',
                props: {
                    placeholder: '用户最多获取数量'
                },
                rules:{
                    required:true,
                    max:10000000,
                    min:0,
                    type:'number',
                    pattern:/^[0-9]+$/
                },
                events:{
                  blur(){
                    window.scroll(0,0);
                  }
                }
            },
            {
              label:'投放至',
              type:'radio-group',
              modelKey:'goal',
              props:{
                options:[
                  {
                    label:'宝箱',
                    value:1
                  },
                  {
                    label:'领券页面',
                    value:2
                  }
                ]
              },
              rules:{
                required:true
              }
            },
            {
                label: '卡券有效时间',
                type: 'select',
                modelKey: 'use_limit_type',
                props: {
                    options: [
                        {
                            text:'永久有效',
                            value:1
                        },
                        {
                            text:'超时限制(超指定时间后卡券失效)',
                            value:2
                        },
                        {
                            text:'计时限制(领取卡券后N天后失效)',
                            value:3
                        }
                    ]
                },
                events:{
                    change(value){
                        self.useLimitType(value);
                    }
                },
                rules:{
                    required:true
                }
            },
        ]
      },
      //E表单
      //已投放的宝藏id treasure_id
      treasure_id:0
    }
  },
  created(){
    var {coupon_id,activity_id} = this.$route.params;
    this.coupon_id = coupon_id;
    this.activity_id = activity_id;
    common.store()
            .then((res)=>{
              if(store.state.store.position_id != 0){
                if(!store.state.store.authority.includes('activity')){
                  this.$router.replace('/');
                  return;
                }
              }
              if(res) this.store_id = res.store_id;
            })
            .then(()=>{
                this.getActivity();
            })
            .then(()=>{
                this.getCoupon();
            })
            .then(()=>{
                this.getTreasure();
            })
            .catch(error=>console.log(error));
  },
  mounted(){
    setTimeout(()=>{
      this.page_height = document.documentElement.clientHeight;
      this.scroll_height = document.documentElement.clientHeight - this.$refs.header.getBoundingClientRect().height - this.$refs.footer.getBoundingClientRect().height;
    },100);
  },
  methods:{
      //提交
      submit(){
        var {number,user_number,goal,use_limit_type} = this.data;
        var data = {
            number,
            user_number,
            goal,
            use_limit_type
        }
        if(data.use_limit_type == 2){
            data.limit_time = parseInt(new Date(this.data.use_limit_time).getTime()/1000);
        }else if(data.use_limit_type == 1){
            data.limit_time = 0;
        }else{
            data.limit_time = this.data.use_limit_time;
        }
        if(this.treasure_id == 0){
            data.activity_id = this.activity_id;
            data.coupon_id = this.coupon_id;
            data.store_id = this.store_id;
        }
          var send_data = {
              pages:'activityCoupon',
              doing:'putin',
              store_id:this.store_id,
              activity_id:this.activity_id,
              data
          }
          if(this.treasure_id != 0){
            send_data.treasure_id = this.treasure_id;
          }
          this.$http.post(sysinfo.url,Qs.stringify(send_data))
              .then((res)=>{
                  if(res.data.status == 'success'){
                      if(this.treasure_id == 0){
                          this.treasure_id = res.data.data;
                      }
                  }
                  var err_msg = '';
                  if(res.data.err_status){
                      err_msg = res.data.err_msg;
                  }else{
                    err_msg = res.data.status == 'success' ? '投放成功' : '投放失败';
                  }
                  this.$createToast({
                      time: 2000,
                      txt: err_msg,
                      type:res.data.status == 'success' ? 'correct' : 'error'
                  }).show();
              })
              .catch(error=>console.log(error));
      },
      //获取活动信息
      getActivity(){
        this.$http.post(sysinfo.url,Qs.stringify({
            pages:'activityS',
            doing:'getOne',
            activity_id:this.activity_id,
            return:['name','start']
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    var data = res.data.data;
                    data.start = parseInt(data.start)*1000;
                    this.activity = data;
                }else{
                    this.$router.replace('/');
                }
            })
            .catch(error=>console.log(error));
      },
      //获取卡券信息
      getCoupon(){
        this.$http.post(sysinfo.url,Qs.stringify({
            pages:'storeCoupon',
            doing:'find',
            coupon_id:this.coupon_id
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    this.coupon = res.data.data;
                }else{
                    this.$router.replace('/');
                }
            })
            .catch(error=>console.log(error));
      },
      //获取已经投放的数据
      getTreasure(){
        this.$http.post(sysinfo.url,Qs.stringify({
            pages:'activityCoupon',
            doing:'find',
            activity_id:this.activity_id,
            coupon_id:this.coupon_id
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    var data = res.data.data;
                    this.treasure_id = data.id;
                    this.data.number = data.number;
                    this.data.goal = parseInt(data.goal);
                    this.data.user_number = parseInt(data.user_number);
                    this.data.use_limit_type = parseInt(data.use_limit_type);
                    this.useLimitType(this.data.use_limit_type);
                    this.data.use_limit_time = data.limit_time;
                    if(this.data.use_limit_type == 2){
                        this.data.use_limit_time = common.timeFormat(new Date(parseInt(data.limit_time*1000)));
                        this.limit_time_date = new Date(parseInt(data.limit_time*1000));
                    }
                }
            })
            .catch(error=>console.log(error));
      },
      //卡券时间限制类型
      useLimitType(value){
          this.data.use_limit_time = '';
          switch(value){
              case 1:
                  if(this.form.fields.length > 4){
                      this.form.fields.splice(4,1);
                  }
                  break;
              case 2:
                  var data = {
                      label:'卡券有效期至',
                      type: 'input',
                      modelKey: 'use_limit_time',
                      props:{
                          readonly:true,
                          placeholder:'卡券失效时间'
                      },
                      rules:{
                        required:true
                      },
                      events:{
                          focus:(event)=>{
                              event.target.blur();
                              this.$createDatePicker({
                                  title: '过期时间',
                                  min: new Date(this.activity.start),
                                  max:new Date(2025,1,1),
                                  value: this.limit_time_date,
                                  onSelect:(item)=>{
                                      this.data.use_limit_time = common.timeFormat(item);
                                  }
                              }).show();
                          },
                          blur(){
                            window.scroll(0,0);
                          }
                      }
                  };
                  if(this.form.fields.length > 4){
                      this.form.fields.splice(4,1,data);
                  }else{
                      this.form.fields.splice(4,0,data);
                  }
                  break;
              case 3:
                  var data = {
                      label:'领取后几天失效',
                      type: 'input',
                      modelKey: 'use_limit_time',
                      props:{
                          placeholder:'领取后几天失效'
                      },
                      rules:{
                          required:true,
                          type:'number',
                          min:1,
                          max:10000,
                          pattern:/^[0-9]+$/
                      },
                      events:{
                        blur(){
                          window.scroll(0,0);
                        }
                      }
                  };
                  if(this.form.fields.length > 4){
                      this.form.fields.splice(4,1,data);
                  }else{
                      this.form.fields.splice(4,0,data);
                  }
                  break;
          }
      },
      //返回类型type
      getType(type){
          for(let i=0;i<store.state.coupon_classify.length;i++){
              if(store.state.coupon_classify[i].value == type){
                  return store.state.coupon_classify[i].text.substring(0,2);
              }
          }
      },
      //返回cost
      getCost(type){
          switch(type){
              case 'dj':
                  return this.coupon.face_value+'元';
              case 'mj':
                  return '满'+this.coupon.face_value+'元减'+this.coupon.minus_value+'元';
              case 'dh':
                  return this.coupon.face_value;
              case 'zk':
                  return this.coupon.face_value+'折';
              case 'rc':
                  return this.coupon.face_value;
          }
      }
  }
}
</script>

<style scoped>
  .putin{
    font-size:16px;
  }
  #header{
    position: fixed;
    top:0;
    left:0;
    width:375px;
    height:40px;
    line-height: 40px;
    font-size:14px;
    border-bottom: 1px solid #eee;
    padding:0 10px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scroll{
    margin-top:40px;
    padding:0 10px;
    box-sizing: border-box;
  }
  #coupon{
    position: relative;
    width:355px;
    height:138px;
    margin:10px 0;
    padding: 10px;
    box-sizing: border-box;
    color:#fff;
  }
  #coupon.dj{
    background: url('../../theme/images/dj1-bg.png') no-repeat;
    background-size: 100% 100%;
  }
  #coupon.mj{
    background: url('../../theme/images/mj1-bg.png') no-repeat;
    background-size: 100% 100%;
  }
  #coupon.zk{
    background: url('../../theme/images/zk1-bg.png') no-repeat;
    background-size: 100% 100%;
  }
  #coupon.dh{
    background: url('../../theme/images/dh1-bg.png') no-repeat;
    background-size: 100% 100%;
  }
  #coupon.rc{
    background: url('../../theme/images/rc1-bg.png') no-repeat;
    background-size: 100% 100%;
  }
  #coupon .type{
    position: absolute;
    top:0;
    right:10px;
    height:40px;
    line-height: 40px;
    font-size:18px;
    color:#fff;
    text-shadow: 0 0 0.1em, 0 0 0.3em;
  }
  #coupon .cost{
    float: left;
    width:160px;
    font-size:16px;
    margin:4px 10px 0 0;
  }
  #coupon .name{
    float: left;
    width:160px;
    font-size:14px;
    margin:4px 10px 0 0;
  }
  #coupon .cover{
    display: block;
    float: left;
    width:110px;
    height:110px;
    object-fit: cover;
    margin: 3px 10px 0 0;
  }
  #footer{
    position: fixed;
    bottom:0;
    left:0;
    width:375px;
    height:50px;
  }
</style>

<style lang="stylus" rel="stylesheet/stylus">
    .cube-picker-wheel-item
        font-size:16px;
</style>
